 <template>
  <div v-loading="fullscreenLoading" class="app-container">
    <el-row>
      <el-col :span="8">
        <el-radio-group v-model="queryParams.radio">
          <el-radio :value="1">OcId</el-radio>
          <el-radio :value="2">ModuleId</el-radio>
          <el-radio :value="3">CustomerId</el-radio>
          <el-radio :value="4">Modelsn</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8">
        <el-input v-model="InputPanels" style="width: 400px; height: 32px" @input="panelList" placeholder="SN" />
      </el-col>
      <el-col :span="2">
        <el-text class="mx-1" type="primary" style="line-height: 32px">当前页{{ storeDataList.length }} 条</el-text>
      </el-col>
      <el-col :span="3"></el-col>
      <el-col :span="2">
        <el-button v-loading="exportLoading" type="warning" plain icon="download" @click="exportToExcel()">导出</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 8px">
      <el-table :data="storeDataList" border height="600">
        <el-table-column prop="processgroupname" label="内箱号" align="center" width="160" />
        <el-table-column prop="ocid" label="屏体码" align="center" />
        <el-table-column prop="moduleid" label="制程码" align="center" />
        <el-table-column prop="customerid" label="客户码" align="center" />
        <el-table-column prop="modelsn" label="注胶码" align="center" />
        <el-table-column prop="productrequestname" label="华麟工单" align="center" />
        <el-table-column prop="productspecname" label="型号" align="center" />
        <el-table-column prop="lasteventtime" label="最后事件时间" align="center" />
        <el-table-column prop="lasteventuser" label="最后事件人" align="center" />
      </el-table>
    </el-row>
    <!-- <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="handlePagination" /> -->
    <el-row class="pagination-container">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </el-row>

    <el-drawer v-model="drawer" title="I am the title" :with-header="true">
      <span>{{ drawerMessage }}</span>
    </el-drawer>
  </div>
</template> 
<script setup name="panelListSerch">
import { panelListSerch } from '@/api/infoSerch/panelListSerch'
import * as XLSX from 'xlsx'
import _ from 'lodash'
const { proxy } = getCurrentInstance()
const drawer = ref(false)
const drawerMessage = ref('')
const fullscreenLoading = ref(false)

const InputPanels = ref('')
const total = ref(0)
const pageSize = ref(10)
const page = ref(1)

const state = reactive({
  storeDataList: [], //存当前页数据
  storeDataListAll: [], //所有页数据
  retInfo: {},
  retMessage: '',
  exportLoading: false
})
const queryParams = reactive({
  panels: [],
  radio: 0,
  pageNum: 1,
  pageSize: 10
})

const { storeDataList, storeDataListAll, retMessage, exportLoading } = toRefs(state)

function sizeChange(val) {
  pageSize.value = val
  page.value = 1
  getTableData()
}
function getTableData() {
  storeDataList.value = storeDataListAll.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
}
function currentChange(val) {
  page.value = val
  getTableData()
}

function panelList() {
  if (queryParams.radio === 0) {
    drawer.value = true // 数据为空，显示抽屉并设置消息
    drawerMessage.value = '需要在查询输入框前勾选：输入ID的类型'
  }
  if (queryParams.panels) {
    fullscreenLoading.value = true
    queryParams.panels = InputPanels.value.split(' ').filter((item) => item.trim().length > 0)
    panelListSerch(queryParams).then((res) => {
      //storeDataList.value = res.data
      storeDataListAll.value = res.data
      //console.log(res.data.data)
      retMessage.value = res.msg
      total.value = res.data.length
      getTableData()
      fullscreenLoading.value = false
    })
  } else {
    fullscreenLoading.value = false
  }
}

// 快速导出所有数据到excel表格，仅前端一个方法
function exportToExcel() {
  const data = storeDataListAll.value
  //const fileNamePrefix = queryParams.value.boxId
  exportLoading.value = true
  if (data.length === 0) {
    drawer.value = true // 数据为空，显示抽屉并设置消息
    drawerMessage.value = '嗨，没有数据可以导出'
    exportLoading.value = false
  } else {
    exportLoading.value = false
  }
  const now = new Date()
  const fileNameSuffix = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now
    .getDate()
    .toString()
    .padStart(2, '0')}_${now.getHours().toString().padStart(2, '0')}-${now.getMinutes().toString().padStart(2, '0')}-${now
    .getSeconds()
    .toString()
    .padStart(2, '0')}`
  // const fileName = `${fileNamePrefix}_${fileNameSuffix}.xlsx`
  const fileName = `${fileNameSuffix}.xlsx`
  const headers = Object.keys(data[0]).map((key) => ({
    header: key, // 将字段名作为标题
    key: key // key与字段名相同
  }))
  headers.forEach((headerObj) => {
    const customHeaders = {
      processgroupname: '内箱号',
      ocid: '屏体码',
      moduleid: '制程码',
      customerid: '客户码',
      modelsn: '注胶码',
      productrequestname: '华麟工单',
      productspecname: '型号',
      lasteventtime: '最后事件时间',
      lasteventuser: '最后事件人'
    }
    if (customHeaders[headerObj.key]) {
      headerObj.header = customHeaders[headerObj.key]
    }
  })
  const sheetData = [headers.map((h) => h.header)] // 第一行是标题
  sheetData.push(...data.map((item) => headers.map((h) => item[h.key])))
  const worksheet = XLSX.utils.aoa_to_sheet(sheetData)

  //const worksheet = XLSX.utils.json_to_sheet(data)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = fileName
  a.click()
  URL.revokeObjectURL(url)
  exportLoading.value = false
}
</script>
<style scoped>
.pagination-container {
  display: flex;
  justify-content: right;
}
</style>





